<template>
  <van-datetime-picker
    v-model="currentDate"
    type="date"
    title="选择年月日"
    :min-date="minDate"
    :max-date="maxDate"
    @confirm="onConfirm"
    @cancel="onCancel"
  />
</template>

<script>
// 组件传值
// props + emit + $parent + $refs + v-model + .sync + 事件总线 + vuex
// 作用域插槽 路由parmas query
// $attrs $chidren

// v-model
//  - 原生input
//  - 组件(双向绑定值)
//    - value属性和input事件的语法糖
//    - v-model只能在组件上使用一次
//    - 修改 value和input的名字
//      - 修改子组件 model: { prop:'属性名',event:'事件名' }

// 1. 回显数据 2.取消重置 3. 确认修改
import { editUserProfileAPI } from '@/api'
import dayjs from '@/utils/dayjs'
export default {
  model: {
    prop: 'birthday',
    event: 'update:birthday'
  },
  props: {
    birthday: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      minDate: new Date(1900, 0, 1), // 最小时间1900
      maxDate: new Date(), // 当前时间为最大时间
      currentDate: new Date(this.birthday) // 当前选中的时间
    }
  },
  methods: {
    async onConfirm() {
      const birthday = dayjs(this.currentDate).format('YYYY-MM-DD')

      // 1. 发送请求
      await editUserProfileAPI({
        birthday
      })
      // 2. 修改试图
      this.$emit('update:birthday', birthday)
      // 3. 关闭弹层

      this.$emit('close')
    },
    onCancel() {
      // 1. 关弹层
      this.$emit('close')
      // 2. 通过v-if控制子组件的销毁
    }
  }
}
</script>

<style></style>
